$(document).ready(function() {
    // 加载关注列表
	let userId = $(".userId").val();
    function loadFollows() {
        $.ajax({
            url: 'follow',
            type: 'GET',
            data:{
            	"userId":userId
            },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    renderFollows(response.data);
                } else {
                    console.error('获取关注列表失败');
                }
            },
            error: function() {
                console.error('请求失败');
            }
        });
    }
    
    // 渲染关注列表
    // 修改渲染逻辑，匹配后端返回的数据结构
function renderFollows(follows) {
    $('.follow-list').empty();
    
    if (follows.length === 0) {
        $('.follow-list').html(`
            <div class="text-center py-5">
                <i class="fas fa-user-plus fa-3x mb-3 text-muted"></i>
                <p class="text-muted">您还没有关注任何用户</p>
            </div>
        `);
        return;
    }
    
    follows.forEach(function(user) {
        // 将tags字符串转换为数组
        const tagsArray = user.tags ? user.tags.split(',') : [];
        const tagsHtml = tagsArray.map(tag => 
            `<span class="follow-tag">${tag}</span>`
        ).join('');
        
        const verifiedIcon = user.verified ? 
            '<i class="fas fa-check-circle text-primary"></i>' : '';
        
        const followItem = `
        <form action="sellerInfo" method="POST">
        	<a href="#" onclick="$(this).parent().submit();">
        	<input type="hidden" name="sellername" value="${user.username}">
        	<input type="hidden" name="sellerid" value="${user.userId}">
            <div class="follow-item" data-userid="${user.userId}">
                <img src="${user.headImg || 'img/headimg_def.jpg'}" class="follow-avatar">
                <div class="follow-content">
                    <div class="follow-name">
                        ${user.username} ${verifiedIcon}
                    </div>
                    <div class="follow-info">
                        <span><i class="fas fa-map-marker-alt"></i> ${user.address || '未知地区'}</span>
                        <span><i class="fas fa-user-friends"></i> 粉丝: ${user.fanNum || 0}</span>
                        <span><i class="fas fa-box-open"></i> 在售: ${user.sellerNum || 0}件</span>
                    </div>
                    <div class="follow-tags">
                        ${tagsHtml}
                    </div>
                    <div class="follow-stats">
                        <div class="follow-stat"><strong>${user.favorableRate*100 || 0}%</strong>好评率</div>
                        <div class="follow-stat"><strong>${user.soldCount || 0}</strong>卖出宝贝</div>
                        <div class="follow-stat"><strong>${user.replyRate || 0}%</strong>回复率</div>
                    </div>
                </div>
                <div class="follow-actions">
                    <div class="follow-btn unfollow" data-userid="${user.userId}">
                        <i class="fas fa-user-minus me-1"></i> 取消关注
                    </div>
                </div>
            </div>
            </a>
           </form>
        `;
        
        $('.follow-list').append(followItem);
    });
}
    
    // 初始化加载
    loadFollows();
    
    // 取消关注事件
    $(document).on('click', '.unfollow', function() {
        const userId = $(this).data('userid');
        const $item = $(this).closest('.follow-item');
        
        if (confirm('确定要取消关注该用户吗？')) {
            $.ajax({
                url: 'follow',
                type: 'POST',
                data: {
                    "action": 'unfollow',
                    "followId": userId
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        // 平滑移除关注项
                        $item.fadeOut(300, function() {
                            $(this).remove();
                            
                            // 检查是否还有关注项
                            if ($('.follow-item').length === 0) {
                                $('.follow-list').html(`
                                    <div class="text-center py-5">
                                        <i class="fas fa-user-plus fa-3x mb-3 text-muted"></i>
                                        <p class="text-muted">您还没有关注任何用户</p>
                                        <button class="btn btn-primary mt-2">去发现用户</button>
                                    </div>
                                `);
                            }
                        });
                    } else {
                        alert('操作失败: ' + response.message);
                    }
                },
                error: function() {
                    alert('请求失败');
                }
            });
        }
    });
});
